<div ng-init="vm.init();refresh();">
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">MOCK 数据编辑</div>
      <div class="pull-right">
        <div class="btn-group x-btn-list">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
              ng-disabled="vm.node.name == '' || vm.node.root">复制 <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><button id="copy" class="btn btn-default btn-block" data-clipboard-action="copy"
                ng-disabled="!vm.node.leaf">数据</button></li>
            <li class="divider" ng-if="sessionUser.role"></li>
            <li ng-if="sessionUser.role"><button class="btn btn-default btn-block" ng-click="vm.copyMock('file')"
                ng-disabled="!vm.node.leaf">文件</button></li>
            <li ng-if="sessionUser.role"><button class="btn btn-default btn-block" ng-click="vm.copyMock('folder')"
                ng-disabled="vm.node.leaf">文件夹</button></li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
              ng-disabled="vm.node.name == '' || !vm.node.leaf">导出 <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a ng-href="{{'#!/pojo-evaluator/request' + vm.node.url}}" target="_blank">入参</a></li>
            <li><a ng-href="{{'#!/pojo-evaluator/response' + vm.node.url}}" target="_blank">出参</a></li>
            <li class="divider"></li>
            <li><a ng-href="{{'#!/apidoc-generator' + vm.node.url}}" target="_blank">ApiDoc</a></li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-success" ng-disabled="vm.node.name == '' || !vm.node.leaf"
              ng-click="vm.showMockTest()">测试</button>
          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
               ng-disabled="vm.node.name == '' || !vm.node.leaf"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a ng-href="{{'#!/http-requestor' + vm.node.url}}" target="_blank">高级测试</a></li>
          </ul>
        </div>
        <a ng-href="{{vm.node.url}}" target="_blank" class="btn btn-default" ng-disabled="vm.node.url == ''">链接地址</a>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-4">
      <fieldset>
        <legend>文件列表</legend>
        <div class="x-page-scope">
          <div class="x-tree">
            <div class="input-group x-tree-filter">
              <input type="text" class="form-control" ng-model="vm.filter" ng-change="vm.filterTree()"
                  placeholder="文件夹/文件名">
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="vm.expandAll()" title="展开">
                  <i class="fa fa-plus"></i></button>
                <button type="button" class="btn btn-default" ng-click="vm.collapseAll()" title="折叠">
                  <i class="fa fa-minus"></i></button>
                <button type="button" class="btn btn-default" ng-click="vm.refresh()" title="刷新">
                  <i class="fa fa-refresh"></i></button>
              </span>
            </div>
            <ul id="mock-tree" class="ztree"></ul>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="col-md-8">
      <fieldset>
        <legend>文件数据<font color="green">（支持：JSON和XML文本、<a href="javascript:void(0)" class="x-link"
            ng-click="vm.showShortcutKey()">常用编辑快捷键</a>）</font></legend>
        <div class="x-page-scope" ng-class="{'x-full-screen': vm.fullScreen}" ng-show="vm.textMock != ''">
          <div class="x-editor">
            <pre id="data-editor"></pre>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
  <script type="text/ng-template" id="editor-tools">
    <div class="x-editor-tool">
      <div class="x-toolbar btn-group">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="字体大小">
            <i class="fa fa-font"></i> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu x-font-list">
            <li ng-repeat="size in [8, 9, 10, 12, 14, 16, 20]" ng-click="vm.handle('font', size)"
                ng-class="{'active': size == vm.fontSize}">
              <a href="javascript:void(0)" style="font-size:{{size}}px">{{size}}px</a></li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="文本编辑">
            <i class="fa fa-file-text-o"></i> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu x-font-list">
            <li ng-click="vm.handle('edit', 'headers')"><a href="javascript:void(0)">Headers</a></li>
            <li ng-click="vm.handle('edit', 'requestBody')"><a href="javascript:void(0)">入参</a></li>
            <li ng-click="vm.handle('edit', 'errors')"><a href="javascript:void(0)">错误</a></li>
            <li ng-click="vm.handle('edit', 'comments')"><a href="javascript:void(0)">备注</a></li>
          </ul>
        </div>
        <button class="btn btn-default" ng-click="vm.handle('undo')" ng-disabled="!vm.canUndo" title="撤销">
          <i class="fa fa-undo"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('redo')" ng-disabled="!vm.canRedo" title="重做">
          <i class="fa fa-repeat"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('format')" title="格式化"><i class="fa fa-code"></i></button>
        <button class="btn btn-default" ng-click="vm.showSearchbox()" ng-disabled="!vm.searchboxClosed" title="查找/替换">
          <i class="fa fa-search"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('unfold')" title="全部展开">
          <i class="fa fa-plus-square-o"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('fold')" title="全部折叠">
          <i class="fa fa-minus-square-o"></i></button>
        <button class="btn btn-default" ng-click="vm.handle('wrap')" title="自动换行">
          <i class="fa" ng-class="{'fa-toggle-on': vm.toggleWrap, 'fa-toggle-off': !vm.toggleWrap}"></i></button>
        <button class="btn btn-default" ng-click="vm.save()" ng-disabled="!(vm.status.enabled && vm.status.changed)"
            title="保存"><i class="fa fa-save"></i></button>
        <button class="btn btn-default" ng-click="vm.fullScreen = !vm.fullScreen" title="{{vm.fullScreen ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i></button>
      </div>
    </div>
    <div class="x-editor-tool x-goto-top hidden">
      <div class="x-toolbar">
        <button type="button" class="btn btn-default btn-circle btn-lg" ng-click="vm.gotoTop()" title="回到顶部">
          <i class="fa fa-arrow-up"></i></button>
      </div>
    </div>
  </script>
</div>
